<template>
    <div class="content">
        <!-- <img class="banner" src="https://www.freeimg.cn/i/2024/02/28/65dee6421735e.jpg" alt=""> -->
        <div class="wave">
            <div class="title-content">
                <canvas id="title" height="200" :width="width"></canvas>
            </div>
            <canvas id="canvas" height="100" width="100" style="width: 100%; height: 100px;" ></canvas>
        </div>
    </div>
</template>
<script lang="ts" setup>
import useWave from './hooks/useWave'
import useTitle from './hooks/useTitle'
import {ref} from 'vue'

let width = ref(document.body.clientWidth-10)
console.log(width.value);

useWave()
useTitle(width.value)


</script>
<style scoped>
.banner {
    width: 100%;
}
.content {
    background-image: url("https://i.ejiaimg.cn/234/2025/02/14/67af3abae98e0.jpg");
    background-size: cover;
    /* 填充方式:覆盖 */
    height: 400px;
    background-position: center;
}

#canvas{
    margin-top: 110px;
}
#title{
    margin: 50px auto;
}

.title-content{
    margin: 0 auto;
    height: 200px;
}
</style>